home *** CD-ROM | disk | FTP | other *** search
/ Software USA 4 #5 / Software USA Volume 4.05.iso / mac / Education / HTML Tricks / Extreme Mac HTML Tricks v2.1 / Extreme Mac HTML Tricks v2.1.rsrc / TEXT_139.txt < prev    next >
Text File  |  1996-10-31  |  6KB  |  134 lines

  1.  
  2.  
  3.     Do you want to make frames like on Extreme Mac? Well, I've had many requests asking me how I made them. It's quite simple if you follow my steps below. 
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  
  16.                  
  17.  
  18.  
  19.  
  20.  
  21. First you have to create your introduction page by using normal HTML. In my example I saved it as "intro.html". Your introduction page will load on the larger frame. (right-side in this example)
  22.  
  23. The second step will be to create your contents page. (left side in this case) Again, you create this page in "regular" HTML code with one exception. Your links must contain a new element: <TARGET>. This element is inserted in the <A HREF=""> tag as in the following example:
  24. <A HREF="intro.html" TARGET="MAIN">Introduction</A><BR>
  25.  
  26. The TARGET tag tells the browser to load the "Introduction Page" on the left frame. Your left screen will remain the same. So, if you click on the software link of the contents.html page, it will load
  27. on the left frame leaving the right frame untouched.  
  28.     After finishing adding all your links in the same fashion, save your pages. In my example I saved it as "contents.html". This is how mine looks like:
  29.  
  30.  
  31. <!----Created by Joel Mueller ------->
  32. <html>
  33. <head>
  34. <title>Extreme Mac - Demos, News, Games, Software, Macintosh</title>
  35. </head>
  36. <body bgcolor="#000000" background="http://www.extreme-mac.com/images/background.gif" text="#ffffff" link="#000000" vlink="#000000">
  37. <p>
  38. <!-------You can edit this page to look how you want it-------->
  39. <center>
  40. <h1>Contents</h1>
  41. </center>
  42. <hr>
  43. <center>
  44. <a href="intro.html" TARGET="MAIN"><img src="main.gif" alt="Main" border="0"></a><br>
  45.  
  46. <a href="demos.html" TARGET="MAIN"><img src="games_links.gif" alt="Games n' Links" border="0"></a><br>
  47.  
  48. <a href="software.html" TARGET="MAIN"><img src="software.gif" alt="Software" border="0"></a><br>
  49.  
  50. <a href="news.html" TARGET="MAIN"><img src="july_news.gif" alt="News" border="0"></a><br>
  51.  
  52. <a href="oldnews.html" TARGET="MAIN"><img src="previous_news.gif" alt="Previous News" border="0"></a><br>
  53.  
  54. <a href="guestbk.html" TARGET="MAIN"><img src="sign_guestbook.gif" alt="Sign Guestbook" border="0"></a><br>
  55.  
  56. <a href="http://www.Lpage.com/cgi-bin/dbml.exe?template=/wgb/wgbview.dbm&owner=Extguestbk" TARGET="MAIN"><img src="view_guestbook.gif" alt="View Guestbook" border="0"></a><br>
  57.  
  58. <a href="addurl.html"TARGET="MAIN"><img src="add_page.gif" alt="Add Your Page" border="0"></a><br>
  59.  
  60. <a href="addurl.html#HotSites"TARGET="MAIN"><img src="hot_sights.gif" alt="Hot Sights" border="0"></a>
  61.  
  62. </center>
  63. </body>
  64. </html>
  65.  
  66.  
  67.  
  68. The final part would be to create the frame document. Usually your index.html. Here is what mine looks like:
  69.  
  70.  
  71. <!--Created by Joel Mueller-->
  72. <HTML>
  73. <HEAD>
  74. <TITLE>Extreme Mac - Demos, News, Games, Software, Macintosh</TITLE>
  75. </HEAD>
  76. <FRAMESET COLS="22%, 78%">
  77. <FRAME SRC="contents.html">
  78. <FRAME SRC="intro.html" NAME="MAIN">
  79. </FRAMESET>
  80.  
  81. <NOFRAMES>
  82. <!----Below here you can edit all of it to say what you ----->
  83. <!----want to the people that have old browsers not---------->
  84. <!----supporting frames-------------------------------------->
  85. <H3>Your browser does NOT support FRAMES.</h3> This isn't good. Get <a href="http://home.netscape.com/comprod/mirror/index.html">Netscape 2.x</a> by going to the link below and download it immediately. You will be much happier with this awesome web viewing program. It even has e-mail!
  86. <p>
  87. <a href="http://home.netscape.com/comprod/mirror/index.html">
  88. <center><img src="http://home.netscape.com/comprod/mirror/images/now8.gif" alt="Get Netscape 2.0"></a></center>
  89. <p>
  90. <!----It's a good idea to have a page without frames.Like an index-->
  91. Lucky for you I just made a <b><a href="window.html">Non-Frames</a></b> version of Extreme Mac!
  92.  
  93. Send email to <a href="mailto:webmaster@extreme-mac.com">webmaster@extreme-mac.com</a> if you like.</center><br>
  94. <!----End your configuration here-------------------------------->
  95. </NOFRAMES>
  96. </BODY>
  97. </HTML>
  98.  Explanation:
  99.     Your first tag will be <FRAMESET>. This tells the browser to load the frame document. The attribute for the <FRAMESET> tag is COL. This tag specifies the frame dimensions. They have to add up to 100%.
  100.  
  101. <FRAMESET COLS="22%, 78%">
  102.  
  103. The next two lines, <FRAME SRC="enter_your_main_page_url"> indicate the documents to be loaded. "contents.html" will be loaded on the smaller frame, and "Introduction Page" on
  104. the larger frame. Notice the NAME="MAIN". This tells the browser that "intro.html" (Introduction Page) will be designated as the main (large) frame.
  105.  
  106. </FRAMESET>
  107. This tag indecates the end of FRAMESET.
  108.  
  109.     What happens when browsers uncapable of recognizing frames access your page?
  110.     This is where the <NOFRAMES> and </NOFRAMES> tags comes into play. Anything in between those tags will be displayed by the non-compatible browsers. Since your viewers will not be able to see the "Contents Page" it is good practice to include the links in between the <NOFRAME> tags.
  111.  
  112.  
  113.  
  114. A quick review.
  115.  
  116.   1. First create your Main page. This will load on the right-side (large) of the screen. This uses normal HTML code and it will be the default page.
  117.   2. Then, create your smaller frame (left side). Include the TARGET=MAIN in your <A HREF=""> links. Clicking any of the links on this frame will display the appropriate page on your Introduction frame (large).
  118.   3. Finally, create your FRAME document. (index.html) This will include the proportions of your frames, and it will designate the Introduction page.
  119.  
  120.     Pretty easy isn't it? Well, if you just copy and edit the html code above to your specifications it should be very easy. Have fun. :-)
  121.  
  122.  
  123. If you have a link that is on the frames version of your web page,
  124. you'll notice that when you click on it, the link will open inside of the frame, making it hard to view other external web pages if the smaller frame space. To prevent this from happening use target=_top> in your <a href="http://www.extreme-mac.com/" target=_top> This will load the link on the entire window, replacing both sides of the frames with the new page. If you don't know what I mean go to http://www.extreme-mac.com/links/
  125. and notice how when you click on the link, it replaces the entire window.
  126.  
  127.  
  128.  
  129.  
  130.  
  131.  
  132.  
  133.  
  134.